<template>
  <div class="demo-inner-divider">常规表格 table-normal</div>
  <div class="mg-l-40">
    <e-table stripe :columns="columns" :data="data"></e-table>
  </div>
  <div class="demo-inner-divider mg-t-20">小表格 table-small</div>
  <div class="mg-l-40">
    <e-table :columns="columns" :data="data" size="small"></e-table>
  </div>
  <div class="demo-inner-divider mg-t-20">斑马纹表格 table-stripe</div>
  <div class="mg-l-40">
    <e-table stripe :columns="columns" :data="data"></e-table>
  </div>
  <div class="demo-inner-divider mg-t-20">无数据表格 table-no-data</div>
  <div class="mg-l-40">
    <e-table :columns="columns" :data="[]">
      <template v-slot:empty>
        <div>不好意思，请求内容为空</div>
      </template>
    </e-table>
  </div>
  <div class="demo-inner-divider mg-t-20">多选带插槽 table-select-with-slot</div>
  <div class="mg-l-40">
    <e-table :columns="columns1" :data="data1" @onSelect="handleSelectionAct" @onSelectionChange="handleSelectionChange">
      <template #motion="{ row }">
        <span>
          <e-tag :status="eTagStatusTrans(row.motionStatus)">{{ statusContentTrans(row.motionStatus) }}</e-tag>
        </span>
      </template>
      <template #action="{ index }">
        <e-button type="primary" size="small" style="margin-right: 5px" @click="update(index)">修改</e-button>
        <e-button size="small" @click="remove(index)">删除</e-button>
      </template>
    </e-table>
  </div>
  <div class="demo-inner-divider mg-t-20">固定滚动列表 table-scroller</div>
  <div class="mg-l-40">
    <e-table :columns="columns2" :data="data2" width="550">
      <template #motion="{ row }">
        <span>
          <e-tag :status="eTagStatusTrans(row.motionStatus)">{{ statusContentTrans(row.motionStatus) }}</e-tag>
        </span>
      </template>
      <template #action="{ index }">
        <e-button type="primary" size="small" style="margin-right: 5px" @click="update(index)">修改</e-button>
        <e-button size="small" @click="remove(index)">删除</e-button>
      </template>
    </e-table>
  </div>

  <div class="demo-inner-divider mg-t-20">嵌入式表格 table-inner</div>
  <TableExpandSlot></TableExpandSlot>
  <TableExpandRender></TableExpandRender>
  <TableExpandSlotFields></TableExpandSlotFields>
  <div class="demo-inner-divider mg-t-20">多选+展开 table-selection-with-expand </div>
  <div class="mg-l-40">
    <e-table row-key="name" :columns="columns13" :data="data13" @onSelectionChange="handleSelectionChange">
      <template v-slot:action>
        <e-button type="primary" size="small" style="margin-right: 5px">修改</e-button>
        <e-button size="small">删除</e-button>
      </template>
    </e-table>
  </div>

  <div class="demo-inner-divider mg-t-20">筛选+排序表格 table-filter-sort</div>
  <div class="mg-l-40">
    <e-table :columns="columns12" :data="data12"></e-table>
  </div>

  <div class="mg-l-40  mg-t-20">
    <TableFilterCheckbox />
  </div>

  <div class="mg-l-40  mg-t-20">
    <TableFilterCheckboxEnum />
  </div>

  <div class="demo-inner-divider mg-t-20">单选表格 table-select</div>
  <div class="mg-l-40">
    <e-table :columns="columns17" :data="data17" highlightRow @onCurrentChange="handleCurrentChange"></e-table>
  </div>

  <div class="demo-inner-divider mg-t-20">可嵌入表格 table-table</div>
  <TableEmbedable></TableEmbedable>

  <br />

  <div class="mg-l-40 mg-t-20">
    <e-table :columns="columns16" :data="data16" class="table-table">
      <template #expandSlot="{ row }">
        <e-table :columns="row.columns" :data="row.data">
          <template #motion="{ row }">
            <span>
              <e-tag :status="eTagStatusTrans(row.motionStatus)">{{ statusContentTrans(row.motionStatus) }}</e-tag>
            </span>
          </template>
          <template #action="{ index }">
            <e-button type="primary" size="small" style="margin-right: 5px" @click="update(index)">修改</e-button>
            <e-button size="small" @click="remove(index)">删除</e-button>
          </template>
        </e-table>
      </template>
    </e-table>
  </div>

  <div class="demo-inner-divider mg-t-20">可编辑表格点击按钮新增一行 table-add</div>
  <div class="mg-l-40">
    <e-table :columns="columns18" :data="data18">
      <template #action="{ row, column: { key, rules } }">
        <e-form :ref="key + '-formCustom'" :model="row" :rules="ruleColumns">
          <e-formItem :prop="key" label="" v-if="key === 'occupation'">
            <e-select v-model="row[key]" placeholder="请选择" transfer>
              <e-option
                v-for="item in selectList"
                :value="item.value"
                :key="item.value"
                :disabled="item.disabled">{{ item.label }}</e-option>
            </e-select>
          </e-formItem>
          <e-formItem :prop="key" label="" v-if="key === 'time'">
            <e-date-picker
              :model-value="row[key]"
              type="date"
              placeholder="Select Date"
              style="width: 200px"
              confirm
              transfer
            ></e-date-picker>
          </e-formItem>
          <e-formItem :prop="key" label="" v-if="key === 'name' || key === 'age' || key === 'hobby'">
            <e-tooltip placement="top" transfer>
              <template #content>
                <e-icon v-if="verifyError" type="warning-filled" :size="15" :color="'red'"></e-icon>
                <span>{{rules}}</span>
              </template>
              <e-input type="text" v-model="row[key]" placeholder="请输入" @change="changeInput(key + '-formCustom')"></e-input>
            </e-tooltip>
          </e-formItem>
        </e-form>
      </template>
      <template #footer>
        <e-button type="text" class="add" @click="addRow(data18)" icon="add">新增</e-button>
      </template>
    </e-table>
  </div>

  <div class="demo-inner-divider mg-t-20">可拖拽表格 table-draggable</div>
  <div class="mg-l-40">
    <e-table :columns="columns15" :data="data15" draggable @on-drag-drop="handleDragDrop"></e-table>
  </div>

  <div class="demo-inner-divider mg-t-20">有边框表格 table-border</div>
  <div class="mg-l-40">
    <e-table :columns="columns" :data="data" border></e-table>
  </div>

  <div class="demo-inner-divider mg-t-20">表格行/列合并表格 table-span-method</div>
  <div class="mg-l-40">
    <e-table :columns="columns" :data="data" :span-method="arraySpanMethod" border></e-table>
  </div>

  <div class="demo-inner-divider mg-t-20">文案溢出表格 table-show-overflow-tooltip</div>
  <div class="mg-l-40">
    <e-table :columns="columns14" :data="data14"></e-table>
  </div>
  <!-- API说明 -->
  <table-md class="markdown-body mg-t-20"></table-md>
</template>
<script>
import TableMd from '../../docs/table.md'
import TableFilterCheckbox from "./tables/tableFilterCheckbox.vue";
import TableFilterCheckboxEnum from "./tables/tableFilterCheckboxEnum.vue";
import TableExpandSlot from "./tables/tableExpandSlot.vue";
import TableExpandRender from "./tables/tableExpandRender.vue";
import TableExpandSlotFields from "./tables/tableExpandSlotFields.vue";
import TableEmbedable from "./tables/tableEmbedable.vue";

export default {
  components: { TableMd, TableFilterCheckbox, TableFilterCheckboxEnum, TableExpandSlot, TableExpandRender, TableExpandSlotFields, TableEmbedable },
  data () {
    const validate = (rule, value, callback) => {
      if (/^[0-9]*$/.test(value)) {
        callback()
      } else {
        callback(new Error('请输入数字'))
      }
    }
    return {
      verifyError: false,
      columns: [
        {
          title: '姓名',
          key: 'name',
          resizable: true
        },
        {
          title: '年龄',
          key: 'age',
          resizable: true
        },
        {
          title: '工作部门',
          key: 'occupation',
          resizable: true
        }
      ],
      data: [
        {
          name: 'alfred',
          age: 26,
          occupation: 'IaaS',
        },
        {
          name: 'tom',
          age: 27,
          occupation: 'PaaS'
        },
        {
          name: 'jerry',
          age: 28,
          occupation: 'SaaS'
        }
      ],
      columns1: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
        },
        {
          title: '时间段',
          key: 'duration'
        },
        {
          title: '情绪',
          slot: 'motion'
        },
        {
          title: '工作内容',
          key: 'job'
        },
        {
          title: '操作',
          slot: 'action'
        }
      ],
      data1: [
        {
          duration: '上午',
          motionStatus: 'happy',
          job: '摸鱼',
          possibility: '简单'
        },
        {
          duration: '下午',
          motionStatus: 'sad',
          possibility: '复杂',
          job: '调bug'
        },
        {
          duration: '晚上',
          motionStatus: 'happy',
          possibility: '容易',
          job: '写需求'
        }
      ],
      columns2: [
        {
          title: '时间段',
          key: 'duration',
          width: 100,
          fixed: 'left'
        },
        {
          title: '情绪',
          width: 100,
          slot: 'motion'
        },
        {
          title: '天气',
          width: 100,
          key: 'weather'
        },
        {
          title: '工作内容',
          width: 100,
          key: 'job'
        },
        {
          title: '工作复杂度',
          key: 'possibility',
          width: 100,
        },
        {
          title: '操作',
          width: 140,
          slot: 'action',
          fixed: 'right'
        }
      ],
      data2: [
        {
          duration: '上午',
          motionStatus: 'happy',
          job: '摸鱼',
          weather: '晴',
          possibility: '简单'
        },
        {
          duration: '下午',
          motionStatus: 'sad',
          job: '调bug',
          weather: '晴',
          possibility: '复杂'
        },
        {
          duration: '晚上',
          motionStatus: 'happy',
          job: '写需求',
          weather: '雨',
          possibility: '一般'
        }
      ],
      columns12: [
        {
          title: '姓名',
          key: 'name',
          sortable: true
        },
        {
          title: '年龄',
          key: 'age',
          filters: [
            { label: '全选', value: 0},
            { label: '大于等于26', value: 1 },
            { label: '小于26', value: 2 , disabled: true}
          ],
          filteredValue: [],
          filterMultiple: false,
          filterMethod (value, row) {
            if (value === 1) {
              return row.age >= 26;
            } else if (value === 2) {
              return row.age < 26;
            } else {
              return true
            }
          }
        },
        {
          title: '工作部门',
          key: 'occupation'
        }
      ],
      data12: [
        {
          name: 'alfred',
          age: 26,
          occupation: 'IaaS',
        },
        {
          name: 'tom',
          age: 27,
          occupation: 'PaaS'
        },
        {
          name: 'jerry',
          age: 28,
          occupation: 'SaaS',
        },
        {
          name: 'dog',
          age: 20,
          occupation: 'IaaS',
        },
        {
          name: 'miaomiao',
          age: 18,
          occupation: 'IaaS',
        }
      ],
      columns13: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
        },
        {
          title: '团建类别',
          key: 'name',
          tree: true
        },
        {
          title: '经费（元）',
          key: 'age'
        },
        {
          title: '可开票',
          key: 'occupation'
        },
        {
          title: '操作',
          width: 140,
          slot: 'action'
        }
      ],
      data13: [
        {
          name: '烧烤',
          age: 2000,
          occupation: '是',
          children: [
            {
              name: '肉类',
              age: 500,
              occupation: '是'
            },
            {
              name: '蔬菜类',
              age: 500,
              occupation: '是'
            }
          ]
        },
        {
          name: '游乐园',
          age: 3000,
          occupation: '是',
          _showChildren: true,
          children: [
            {
              name: '跳楼机',
              age: 400,
              occupation: '是'
            },
            {
              name: '过山车',
              age: 200,
              occupation: '是'
            },
            {
              name: '鬼屋',
              age: 400,
              occupation: '否'
            }
          ]
        },
        {
          name: '野炊',
          age: 3500,
          occupation: '是',
          children: [
            {
              name: '钓鱼',
              age: 1000,
              occupation: '否'
            },
            {
              name: '果蔬',
              age: 500,
              occupation: '是'
            },
            {
              name: '熟食',
              age: 600,
              occupation: '是'
            }
          ]
        }
      ],
      columns14: [
        {
          title: '姓名',
          key: 'name'
        },
        {
          title: '年龄',
          key: 'age'
        },
        {
          title: '工作部门',
          key: 'occupation',
          width: 200,
          ellipsis: true,
          tooltip: true
        },
        {
          title: '工号',
          key: 'number'
        },
        {
          title: '工位',
          key: 'position'
        },
        {
          title: '爱好',
          key: 'hobby'
        },
      ],
      data14: [
        {
          name: 'alfred',
          age: 26,
          number: 'E003',
          position: 'C103',
          hobby: '游泳',
          occupation: 'IaaS',
        },
        {
          name: 'tom',
          age: 27,
          number: 'E001',
          position: 'C101',
          hobby: '码代码',
          occupation: 'PaaS产品部PaaS产品部PaaS产品部PaaS产品部PaaS产品部PaaS产品部'
        },
        {
          name: 'jerry',
          age: 28,
          number: 'E002',
          position: 'C102',
          hobby: '读书',
          occupation: 'SaaS',
        }
      ],
      columns15: [
        {
          type: 'draggable',
          width: 60,
          align: 'center',
        },{
          title: '姓名',
          key: 'name',
          resizable: true
        },
        {
          title: '年龄',
          key: 'age',
          resizable: true
        },
        {
          title: '工作部门',
          key: 'occupation',
          resizable: true
        }
      ],
      data15: [
        {
          name: 'alfred',
          age: 26,
          occupation: 'IaaS',
        },
        {
          name: 'tom',
          age: 27,
          occupation: 'PaaS'
        },
        {
          name: 'jerry',
          age: 28,
          occupation: 'SaaS'
        }
      ],
      columns16: [
        {
          type: 'expand',
          width: 50
        },
        {
          title: '姓名',
          key: 'name',
          resizable: true
        },
        {
          title: '年龄',
          key: 'age',
          resizable: true
        },
        {
          title: '工作部门',
          key: 'occupation',
          resizable: true
        }
      ],
      data16: [
        {
          name: 'alfred',
          age: 26,
          occupation: 'IaaS',
          columns: [
            {
              title: '时间段',
              key: 'duration'
            },
            {
              title: '情绪',
              slot: 'motion'
            },
            {
              title: '工作内容',
              key: 'job'
            },
            {
              title: '操作',
              slot: 'action'
            }
          ],
          data: [
            {
              duration: '上午',
              motionStatus: 'happy',
              job: '摸鱼',
              possibility: '简单'
            },
            {
              duration: '下午',
              motionStatus: 'sad',
              possibility: '复杂',
              job: '调bug'
            },
            {
              duration: '晚上',
              motionStatus: 'happy',
              possibility: '容易',
              job: '写需求'
            }
          ]
        },
        {
          name: 'tom',
          age: 27,
          occupation: 'PaaS'
        },
        {
          name: 'jerry',
          age: 28,
          occupation: 'SaaS'
        }
      ],
      columns17: [
        {
          type: 'current',
          width: 70,
          align: 'center',
        },
        {
          title: '姓名',
          key: 'name',
          resizable: true
        },
        {
          title: '年龄',
          key: 'age',
          resizable: true
        },
        {
          title: '工作部门',
          key: 'occupation',
          resizable: true
        }
      ],
      data17: [
        {
          name: 'alfred',
          age: 26,
          occupation: 'IaaS',
        },
        {
          name: 'tom',
          age: 27,
          occupation: 'PaaS'
        },
        {
          name: 'jerry',
          age: 28,
          occupation: 'SaaS'
        }
      ],
      columns18: [
        {
          title: '姓名',
          key: 'name',
          type: 'slot',
          slot: 'action',
          rules: '请输入1-5个字符'
        },
        {
          title: '年龄',
          key: 'age',
          resizable: true,
          type: 'slot',
          slot: 'action',
          rules: '请输入数字'
        },
        {
          title: '工作部门',
          key: 'occupation',
          resizable: true,
          type: 'slot',
          slot: 'action'
        },
        {
          title: '入职时间',
          key: 'time',
          type: 'slot',
          slot: 'action'
        },
        {
          title: '爱好',
          key: 'hobby',
          type: 'slot',
          slot: 'action',
          rules: '请输入1-128个字符'
        },
      ],
      data18: [
        {
          name: 'alfred',
          age: 26,
          time: '2009-12-24',
          hobby: '游泳',
          occupation: 'IaaS',
        },
        {
          name: 'tom',
          age: 27,
          time: '2012-08-24',
          hobby: '码代码',
          occupation: 'PaaS'
        },
        {
          name: 'jerry',
          age: 28,
          time: '2020-07-01',
          hobby: '读书',
          occupation: 'SaaS',
        }
      ],
      ruleColumns: {
        name: [
          {
            required: true,
            message: '请输入姓名',
            trigger: 'blur',
          },
          {
            type: 'string',
            max: 5,
            message: '请输入1-5个字符',
            trigger: 'blur',
          }
        ],
        age: [{ validator: validate, required:true, trigger: 'blur' }],
        hobby: [
          {
            required: true,
            message: '请输入爱好',
            trigger: 'blur',
          },
          {
            type: 'string',
            max: 128,
            message: '请输入1-128个字符',
            trigger: 'blur',
          }
        ],
      },
      selectList: [{
        value: 'PaaS',
        label: 'PaaS产品部'
      },
      {
        value: 'SaaS',
        label: 'SaaS产品部'
      },
      {
        value: 'IaaS',
        label: 'IaaS产品部'
      }]
    }
  },
  methods: {
    handleSpan ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0 && columnIndex === 0) {
        return [1, 2];
      } else if (rowIndex === 0 && columnIndex === 1) {
        return  [0, 0];
      }
      if (rowIndex === 1 && columnIndex === 0) {
        return {
          rowspan: 2,
          colspan: 1
        };
      } else if (rowIndex === 2 && columnIndex === 0) {
        return {
          rowspan: 0,
          colspan: 0
        };
      }
    },
    update (index) {
      // 一些逻辑操作逻辑
    },
    remove (index) {
      // 一些逻辑操作逻辑
    },
    eTagStatusTrans(status) {
      return {
        'happy': 'success',
        'sad': 'error'
      }[status]
    },
    statusContentTrans(status) {
      return {
        'happy': '开心',
        'sad': '沮丧'
      }[status]
    },
    handleSelectionAct (selection, selectionData) {
      // 一些逻辑操作逻辑
    },
    handleSelectionChange (selection) {
      // 一些逻辑操作逻辑
    },
    handleCurrentChange (selection) {
      // 一些逻辑操作逻辑
    },
    handleDragDrop(a,b) {
      this.data15.splice(b, 1, ...this.data15.splice(a, 1, this.data[b]))
    },
    addRow(data) {
      data.push({
        name: 'alfred',
        age: 26,
        time: '2009-12-24',
        hobby: '游泳',
        occupation: 'IaaS'
      })
    },
    changeInput(name) {
      this.$refs[name].validate((valid) => {
        this.verifyError = !valid
      })
    },
    arraySpanMethod({row, column, rowIndex, columnIndex}) {
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
      if (rowIndex === 2) {
        if (columnIndex === 0) {
          return [0, 0];
        } else if (columnIndex === 1) {
          return [1, 2];
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.mg-t-20 {
  margin-top: 20px;
}
.mg-l-40 {
  margin-left: 40px;
}
.description-content {
  color: #6236FF;
}
.table-table {
  /deep/ td.haloe-table-expanded-cell {
    background-color: #F9FAFC ;
  }
}
/deep/ .haloe-form-item-error-tip {
  display: none;
}
</style>
